﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Gauge, Gauge Widget, Radial Gauge" />
    <meta name="description" content="Using the toolbox in the right hand side of the jqxGauge you can easy switch through different properties which are changing gauge's appearance." />
    <title id='Description'>This sample demonstrates the basic Gauge settings.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var labels = { visible: true, position: 'inside' };
              
            //Create jqxGauge
            $('#gauge').jqxGauge({
                ranges: [{ startValue: 0, endValue: 90, style: { fill: '#e2e2e2', stroke: '#e2e2e2' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 },
                         { startValue: 90, endValue: 140, style: { fill: '#f6de54', stroke: '#f6de54' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 },
                         { startValue: 140, endValue: 180, style: { fill: '#db5016', stroke: '#db5016' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 },
                         { startValue: 180, endValue: 220, style: { fill: '#d02841', stroke: '#d02841' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 }
                ],
                cap: { radius: 0.04 },
                caption: { offset: [0, -25], value: 'jQWidgets', position: 'bottom' },
                value: 0,
                style: { stroke: '#ffffff', 'stroke-width': '1px', fill: '#ffffff' },
                animationDuration: 1500,
                colorScheme: 'scheme04',
                labels: labels,
                ticksMinor: { interval: 5, size: '5%' },
                ticksMajor: { interval: 10, size: '10%' }
            });

            //Initialize the Settings panel.
            $('#expander').jqxExpander({ toggleMode: 'none', showArrow: false, width: 200});
            $('#insideRadio').jqxRadioButton({ width: 150, checked: true});
            $('#outsideRadio').jqxRadioButton({ width: 150});
            $('#showLabelsCheckbox').jqxCheckBox({ width: 150, checked: true});
            $('#showRangesCheckbox').jqxCheckBox({ width: 150, checked: true});
            $('#showBorderCheckbox').jqxCheckBox({ width: 150, checked: true});

            //Binding to the widgets's events
            $('#showLabelsCheckbox').on('change', function (e) {
                labels.visible = e.args.checked;
                $('#gauge').jqxGauge('labels', labels);
            });
            $('#showRangesCheckbox').on('change', function (e) {
                $('#gauge').jqxGauge('showRanges', e.args.checked);
            });
            $('#showBorderCheckbox').on('change', function (e) {
                $('#gauge').jqxGauge('border', { visible: e.args.checked });
            });
            $('#outsideRadio').on('change', function (e) {
                if (e.args.checked) {
                    labels.position = 'outside';
                    $('#gauge').jqxGauge('labels', labels);
                }
            });
            $('#insideRadio').on('change', function (e) {
                if (e.args.checked) {
                    labels.position = 'inside';
                    $('#gauge').jqxGauge('labels', labels);
                }
            });

            // set gauge's value.
            $('#gauge').jqxGauge('setValue', 220);
        });
    </script>
</head>
<body class='default'>
    <div class="demo-gauge" style="width: 600px;">
        <div id="gauge" style="float: left;"></div>
        <div id="expander" style="float: right;">
            <div>
                Options
            </div>
            <div>
                <ul style="list-style: none; padding: 0px; margin: 10px;">
                    <li style="padding: 3px; font-family: Verdana; font-size: 12px;">
                        <div id="showLabelsCheckbox">Show labels</div>
                        <ul style="list-style: none; padding: 0px; margin-top: 10px; margin-left: 20px; font-family: Verdana; font-size: 12px;">
                            <li>
                                <div id="insideRadio">Inside the gauge</div>
                            </li>
                            <li>
                                <div style="margin-top: 5px;" id="outsideRadio">Outside the gauge</div>
                            </li>
                        </ul>
                    </li>
                    <li style="padding: 3px; font-family: Verdana; font-size: 12px;">
                        <div id="showRangesCheckbox">Show ranges</div>
                    </li>
                    <li style="padding: 3px; font-family: Verdana; font-size: 12px;">
                        <div id="showBorderCheckbox">Show border</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
